<template>
  <view class="p-privacy">
    <view class="_content" @click="handleChange">
      <x-icon class="icon" name="icon-032" :size="34" color="#00C800" />
      <view class="info">
        <view class="title-box flex between">
          <view class="title">购物保障</view>
          <view class="_checkbox">
            <x-checkbox :checked.sync="checked" :size="40" label="保护中" />
          </view>
        </view>
        <view>
          <text class="text">订单信息将用于商家发货，勾选即代表同意</text>
          <text class="text _a" @click.stop="handleShowTerms">《个人隐私保护条款》</text>
        </view>
      </view>
    </view>

    <!--下单前的提醒-->
    <x-drawer :visible.sync="remindVisible" direction="btt" round>
      <view class="m-privacy-drawer">
        <view class="_header">
          个人隐私保护条款
          <view class="_icon" @click="remindVisible = false">
            <x-icon name="icon-025" color="#C8C9CC" />
          </view>
        </view>
        <view class="_dl">
          <view class="_hh">为给您提供更好的服务</view>
          <view class="_dt">允许我们在必要场景下，合理使用您的个人信息，并且充分保障您的合法权利。</view>
          <view class="_dd" @click="handleShowTerms">《个人隐私保护条款》</view>
        </view>
        <view class="_button safe-area">
          <x-button size="large" round type="primary" @click="handleRemindAndBuy">同意并提交订单</x-button>
          <cover-view style="position: absolute;top: 0;width: 100%;height: 100%;background: rgba(0,0,0,0)" @click="handleRemindAndBuy"></cover-view>
        </view>
      </view>
    </x-drawer>
    <!--个人隐私保护条款内容-->
    <x-drawer :visible.sync="protocolVisible" direction="btt" round>
      <view class="m-privacy-drawer">
        <view class="_header">
          个人隐私保护条款
          <view class="_icon" @click="protocolVisible = false">
            <x-icon name="icon-025" color="#C8C9CC" />
          </view>
        </view>
        <scroll-view class="_protocol" scroll-y="true">
          <view class="p">重要提示：</view>
          <view class="p">1、本页面系由广告主或其代理方（简称“广告客户”）利用小程序提供的技术制作。小程序作为中立的技术提供方，仅基于广告客户的委托和指令代为收集和处理您的个人信息。因广告客户收集、处理您的个人信息，以及广告客户提供的相关功能、服务产生的一切问题，由广告客户负责处理并承担全部法律责任。请您仔细阅读广告客户在本页面上展示的个人信息及隐私保护协议，确保往完全同意相关内容的基础上提交您的信息。</view>
          <view class="p">2、如对广告客户收集、处理您的个人信息有任何问题，可通过联系客服获取广告客户的联系方式。</view>
          <view class="p">尊敬的用户：</view>
          <view class="p">1、我方将按照本条款的规定收集、处理您的个人信息。本协议可能涉及您个人信息权益的重要约定，请您在提供个人信息前仔细阅读。一旦您在页面上提交了相关信息，即视为您同意本协议的全部内容。</view>
          <view class="p">2、为了进一步向您提供商品或服务的相关信息，了解您的需求以更好地实现本广告的推广目的，需要您按页面提交相关信息（简称“客户信息”），手机号、收货人、收货地址将会长期保存，您有权拒绝提供上述信息，但可能无法获取进一步的广告信息。如您提供了上述信息，您应保证所有信息真实、准确、完整、有效。</view>
          <view class="p">3、您同意我方可基于以下目的或原因自行或委托、安排第三方对您的个人信息进行收集和/或处理（这些第三方包括但不限于我们的经销商、广告服务合作方、客服服务商、数据分析服务商等）：（1）用于订单商品发货、售后等订单通知短信；（2）用于核验信息真实性；安排销售人员与您取得联系，向您提供更有价值的信息，实现广告推广目的；（3）用于广告投放、广告投放效果优化、广告归因、广告监测等广告业务合作；（4）用于商业性分析和洞察；（5）其他法律法规许可的目的。我方会要求这些第三方按照不低于我方的安全标准保护您的客户信息。</view>
          <view class="p">4、我方将采取有效措施保障您的个人信息安全，因我方及我方委托的第三方收集、处理您的个人信息产生的一切问题，由我方处理、负责。</view>
          <view class="p">5、若您是未满18周岁的未成年人，请在您的父母或其他监护人监护、指导下共同阅读本协议。</view>
          <view class="p">6、如您有任何投诉、建议或咨询，或有任何基于法律法规规定的权利请求，例如查询、修改、删除、撤回授权等，请联系客服获取我方联系方式。</view>
        </scroll-view>
        <view class="_button safe-area">
          <x-button size="large" round type="primary" @click="handleRemind">我已阅读并同意以上条款</x-button>
          <cover-view style="position: absolute;top: 0;width: 100%;height: 100%;background: rgba(0,0,0,0)" @click="handleRemind"></cover-view>
        </view>
      </view>
    </x-drawer>
  </view>
</template>

<script>
import { mapState } from 'vuex';
import XCheckbox from '@/components/x-checkbox';
import XDrawer from '@/components/x-drawer';
import XButton from '@/components/x-button';
import XIcon from '@/components/x-icon';

export default {
  name: 'PPrivacy',
  components: {
    XIcon,
    XButton,
    XCheckbox,
    XDrawer
  },
  props: {
    defaultChecked: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      checked: false,
      remindVisible: false,
      protocolVisible: false
    };
  },
  computed: {
    ...mapState({
      // 隐私勾选状态
      privacyChecked: state => state['pages'].privacyChecked
    })
  },
  watch: {
    checked(value) {
      this.$store.dispatch('pages/setData', {
        privacyChecked: value
      });
    }
  },
  created() {
    setTimeout(() => {
      this.getPrivacyChecked();
    }, 500);
  },
  methods: {
    getPrivacyChecked() {
      this.$http({
        url: '/order/app/order/privacy'
      }).then(res => {
        this.checked = this.defaultChecked ? this.defaultChecked : res.data;
      });
    },
    handleChange() {
      this.checked = !this.checked;
      this.protocolVisible = false;
      this.remindVisible = false;
    },
    handleRemind() {
      this.checked = true;
      this.protocolVisible = false;
      this.remindVisible = false;
    },
    handleRemindAndBuy() {
      this.checked = true;
      this.protocolVisible = false;
      this.remindVisible = false;
      this.$emit('onPrivacyBuy');
    },
    // 显示条款
    handleShowTerms() {
      this.protocolVisible = true;
    },
    // 下单前提醒
    handleShowRemind() {
      this.remindVisible = true;
    }
  }
};
</script>

<style lang="scss">
.p-privacy{
  display: flex;
  align-items: center;
  ._content{
    display: flex; align-items: baseline; justify-content: center; padding: 30px 20px;width: 100%;
    .icon{
      flex: none;
      margin-right: 10px;
    }
    .info{
      flex: 1;
    }
    .title-box{
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 30px;
    }
    .title{
      font-weight: 500;
    }
    .text{ font-size: 22px; color: #999999;}
    ._a{ color: #0094FF;}
  }
}
.m-privacy-drawer{
  padding: 15px;
  ._header{
    position: relative; height: 80px; line-height: 80px; text-align: center; font-size: 32px; color: #323233;
    ._icon{ position: absolute; padding: 10px; right: 0; top: 50%; line-height: 1; transform: translate3d(0, -50%, 0);}
  }
  ._dl{
    color: #323233; min-height: 300px; padding: 20px 0; font-size: 28px; line-height: 1.8;
    ._hh{font-size: 40px;font-weight: bold}
    ._dd{ color: #0094FF;}
  }
  ._button{
    margin-bottom: 20px;
    position: relative;
  }
  ._protocol{
    color: #323233; font-size: 28px; height: 1080px; overflow: auto; margin-bottom: 20px;text-align: justify;
    .p{ padding-bottom: 10px;}
  }
}
</style>
